<script setup lang="ts">
	defineProps<{
		avatarSrc : string,
		name : string,
		buy : string,
		ranking : string,
	}>()
</script>

<template>
	<view class="ranking-content">
		<view class="user-info">
			<image class="round-avatar" :src="avatarSrc" />
			<view class="name-buying">
				<view class="buying">冲{{ buy }}发</view>
				<view class="name">{{ name }}</view>
			</view>
		</view>

		<view class="prize-extra">
			<image class="ranking-prefix" src="/static/owo/ranking-text.png" mode="widthFix"></image>
			<text class="ranking-num">{{ ranking }}</text>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.name-buying {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4px 0;
		height: 12px;
		gap: 4px;
	}

	.name {
		color: #7A5E15;
	}

	.buying {
		min-width: 28px;
		height: 12px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: white;
		background: linear-gradient(115deg, #FFE814 0%, #E3A917 100%);
		font-size: 8px;
	}

	.ranking-content {
		font-size: 12px;
		font-weight: medium;
		display: flex;
		justify-content: space-between;

		.round-avatar {
			border-radius: 100%;
			height: 42px;
			width: 42px;
		}

		.user-info {
			display: flex;
			gap: 4px;
		}

		.prize-extra {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			color: white;
			font-size: 8px;
			font-weight: medium;
		}

		.ranking-prefix {
			width: 18px;
		}

		.ranking-num {
			font-size: 27px;
			color:#7A5E15;
			font-weight: 600;
		}
	}
</style>